<template>
    <v-navigation-drawer v-model="drawer" app>
        <v-list-item>
            <v-list-item-avatar>
                <v-img src="@/assets/girl.jpg"></v-img>
            </v-list-item-avatar>

            <v-list-item-title>
                康仔码头
            </v-list-item-title>
        </v-list-item>

        <v-divider></v-divider>

        <v-list
                dense
                nav>
            <v-list-item to="/">
                <v-list-item-icon>
                    <v-icon>mdi-view-dashboard</v-icon>
                </v-list-item-icon>

                <v-list-item-title>首页</v-list-item-title>
            </v-list-item>
            <v-list-group
                    v-for="item in items"
                    :key="item.name"
                    v-model="item.active"
                    :prepend-icon="item.iconCls"
                    no-action>
                <template v-slot:activator>
                    <v-list-item-content>
                        <v-list-item-title v-text="item.name"></v-list-item-title>
                    </v-list-item-content>
                </template>
                <v-list-item
                        v-for="child in item.children"
                        :key="child.name"
                        :to="child.path">
                    <v-list-item-content>
                        <v-list-item-title v-text="child.name"></v-list-item-title>
                    </v-list-item-content>
                </v-list-item>
            </v-list-group>
        </v-list>
    </v-navigation-drawer>
</template>

<script>
    export default {
        name: "Navigation",
        data() {
            return {
                selectedItem: 0,
                items: [],
                drawer: true,
            }
        },
        methods: {
            // 初始化页面
            initialize() {
                // 获取菜单列表
                this.$axios.get('/menu').then(
                    response => {
                        // 格式化
                        let fmtRoutes = this.formatRoutes(response.data);
                        console.log(fmtRoutes);
                    }
                ).catch(err => {
                    console.log(err)
                })
            },
            formatRoutes(routes) {
                let fmtRoutes = [];
                routes.forEach(route => {
                    let {path, component, name, iconCls, children} = route;
                    if (children && children instanceof Array) {
                        // 递归
                        this.formatRoutes(children)
                    }
                    let fmRouter = {
                        path: path,
                        name: name,
                        iconCls: iconCls,
                        children: children,
                        // component(resolve) {
                        //     import('../../views/' + component + '.vue')
                        // }
                    };
                    fmtRoutes.push(fmRouter);
                });
                return fmtRoutes
            },
            unDrawer() {
                this.drawer = !this.drawer;
            }
        },
        created() {
            this.initialize()
        }
    }
</script>

<style scoped>

</style>